<template>
	<div class="box">
		<div class="left">
			<div class="one">
				<div class="ysz">
					<div>使用率</div>
					<div>{{info.USE}}%</div>
				</div>
				<div class="ky">
					<div>可用</div>
					<div>{{info.FREE_GB?info.FREE_GB.toFixed(2):''}} GB</div>
				</div>
				<div class="ky">
					<div>使用量</div>
					<div>{{info.USED_GB?info.USED_GB.toFixed(2):''}} GB</div>
				</div>
				<div class="ky">
					<div>总量</div>
					<div>{{info.TOTAL_GB?info.TOTAL_GB.toFixed(2):''}} GB</div>
				</div>
			</div>
			<div class="two" style="display:none">
				<div class="ytj">
					<div>已提交</div>
					<div>23.0/29.0 GB</div>
				</div>
				<div class="yhc">
					<div>已缓存</div>
					<div>6.2 GB</div>
				</div>
			</div>
			<div class="three" style="display:none">
				<div class="fyhcc">
					<div>分页缓存池</div>
					<div>1.0 GB</div>
				</div>
				<div class="ffyhcc">
					<div>非分页缓存池</div>
					<div>824 MB</div>
				</div>
			</div>
		</div>
		<div class="right" style="display:none">
			<table>
				<tr>
					<th>速度</th>
					<th>2133 MHZ</th>
				</tr>
				<tr>
					<th>已使用插槽</th>
					<th>2/2</th>
				</tr>
				<tr>
					<th>外形规格</th>
					<th> SODIMM</th>
				</tr>
				<tr>
					<th>为硬件保留的内存</th>
					<th>138 MB</th>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	import bus from "common/bus.js";
	export default {
		// props:['data'],
		data() {
			return {
				info: ''
			}
		},
		created() {

		},
		mounted() {
			bus.$on('ITEMMONITORMEMORYLINE', (msg) => {
				this.info = msg
			})
		},
		beforeDestroy() {
			this.info = ''
			bus.$off('ITEMMONITORMEMORYLINE')
		}
	}
</script>

<style lang="scss" scope>
	.box {
		display: flex;
		flex-direction: row;

		.left {
			display: flex;
			flex-direction: column;
			font-weight: 600;

			.one,
			.two,
			.three {
				display: flex;
				flex-direction: row;
			}

			.one>div,
			.two>div,
			.three>div {
				margin: 5px;
			}
		}
	}
</style>
